<template slot-scope="scope">

  <div class="register">
    <el-form ref="registerForm" :model="user" :rules="registerRules" class="register-form">
      <h3 class="title">检索借阅管理系统</h3>

      <div class="dashboard-editor-container" style="padding:16px;">
        <el-steps :active="active" finish-status="success">
          <el-step title="第一步"  />
          <el-step title="第二步" @click="getList1()"/>
          <el-step title="第三步" />

        </el-steps>









          <div v-show="active == 1">

            <el-form-item prop="username">
              <el-input v-model="user.username" type="text" auto-complete="off" placeholder="账号" >
                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

              </el-input>

            </el-form-item>

          </div>

        <div v-show="active == 2">

          <el-form ref="form" :model="contentList"  label-width="80px">

<!--         <el-form-item label="密保问题1" prop="securityQuestionOne" label-width="24%">
              <el-input v-model="contentList.securityQuestionOne" placeholder="" disabled="true" />
            </el-form-item>-->

           <el-form-item label="密保问题1" prop="securityQuestionOne" label-width="24%">
             <select v-model="contentList.securityQuestionOne" placeholder="" disabled="true" align="left" style="padding:10px 50px">
                <option value="1" >小学班主任姓名</option>
                <option value="2">初中班主任的姓名</option>
                <option value="3">少年最好玩伴的姓名</option>
               <option value="4">奶奶的名字</option>
               <option value="5">姥姥的名字</option>
               <option value="6">姥爷的名字</option>
              </select>

           </el-form-item>

<!--           <el-input v-model="list"> </el-input>
             <select v-model="city" @change="showValue()">
             <option value="1">北京</option>
             <option value="2">上海</option>
             <option value="3">东京</option>
          </select>-->



            <el-form-item label="密保答案1" prop="securityAnswerOne" label-width="24%">
              <el-input v-model="contentList.securityAnswerOne"  placeholder=""  />


            </el-form-item>


            <el-form-item label="密保问题2" prop="securityQuestionTwo" label-width="24%">
<!--              <el-input v-model="contentList.securityQuestionTwo" placeholder="" disabled="true"/>-->
              <select v-model="contentList.securityQuestionTwo" placeholder="" disabled="true"  style="padding:10px 50px">
                <option value="1" >小学班主任姓名</option>
                <option value="2">初中班主任的姓名</option>
                <option value="3">少年最好玩伴的姓名</option>
                <option value="4">奶奶的名字</option>
                <option value="5">姥姥的名字</option>
                <option value="6">姥爷的名字</option>
              </select>
            </el-form-item>

            <el-form-item label="密保答案2" prop="securityAnswerTwo" label-width="24%">
              <el-input v-model="contentList.securityAnswerTwo" placeholder=""  />
            </el-form-item>

            <el-form-item label="密保问题3" prop="securityQuestionThree" label-width="24%">
<!--              <el-input v-model="contentList.securityQuestionThree" placeholder=""disabled="true"  />-->
              <select v-model="contentList.securityQuestionThree" placeholder="" disabled="true"   style="padding:10px 50px">
                <option value="1" >小学班主任姓名</option>
                <option value="2">初中班主任的姓名</option>
                <option value="3">少年最好玩伴的姓名</option>
                <option value="4">奶奶的名字</option>
                <option value="5">姥姥的名字</option>
                <option value="6">姥爷的名字</option>
              </select>
            </el-form-item>



            <el-form-item label="密保答案3" prop="securityAnswerThree" label-width="24%">
              <el-input v-model="contentList.securityAnswerThree" placeholder="" />
            </el-form-item>




          </el-form>
        </div>
        <div v-show="active == 3">
          <el-form ref="form" :model="List"  label-width="80px" :rules="registerRules">

            <el-form-item label="新密码" prop="newPassword" label-width="28%">


              <el-input v-model="List.newPassword" type="text" auto-complete="off" placeholder="新密码" >
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />

              </el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPassword" label-width="28%">
              <el-input v-model="List.confirmPassword" type="text" auto-complete="off" placeholder="确认密码" >
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>

          </el-form>
        </div>
        <el-button style="margin-top: 12px" ><router-link class="link-type" :to="'/login'">返回</router-link></el-button>

        <el-button   v-if="active ==1" style="margin-top: 12px" @click="getList(user.username)">下一步</el-button>


        <el-button v-if="active ==2" style="margin-top: 12px" @click="submitForm">下一步</el-button>
        <el-button v-if="active ==3" style="margin-top: 12px" @click="getList1(List.newPassword,List.confirmPassword)">确定</el-button>



        <el-button v-if="active > 1" style="margin-top: 12px" @click="pre">上一步</el-button>
      </div>





    </el-form>
  </div>



</template>


<script>
import {listsecurity,listquestion,listresetPwd} from "@/api/module/zxm/application";
import {addBudget, updateBudget} from "@/api/module/cjl/budget";
//  import {updateUserProfile, listsecurity, listUser} from "@/api/system/user";
// import Cookies from "js-cookie";
// import {encrypt} from "@/utils/jsencrypt";


export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.List.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      active: 1,
      contentList:{},
      List:{},
      confirmPassword:{},
      List1:[],
      dataForm: {
        securityQuestionTwo:"",
        securityQuestionOne:"",
        securityQuestionThree:"",
      },
      user: {
        username: "",
        code: "",
        uuid: "",
        securityQuestionOne:"",
      },


      registerRules: {
        username: [
          {required: true, trigger: "blur", message: "请输入您的账号"}
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      },



    };
  },

  methods: {


    mounted(){
      this.getList();
    },
/*    showValue(){
      console.log(this.city)
    },*/
    // 表单重置
    reset() {
      this.registerForm = {
        username: null,
      };
      this.resetForm("registerForm");
    },

    getList(username) {
      console.log("名称"+username)
      listsecurity(username).then(response => {
        window.a=username;
        this.contentList = response.data ?? {};

/*        if(response.data != undefined){

          if(this.contentList.securityQuestionOne = "1"){
            this.contentList.securityQuestionOne = "我是傻逼"
          }
        }*/



        const length = Object.keys(this.contentList).length;

        if(length>0){
          if (this.active++ > 3)
            this.active = 1
        }
        else {
          this.$modal.msgError("用户名错误");
        }
      });




    },

    getList1(newPassword,confirmPassword) {
      var str = newPassword ?? {};
      var str1 = confirmPassword ?? {};
      const length = Object.keys(str1).length;

      if (str.length==0 || length==0){
        this.$modal.msgError("密码不允许未空");
      }
      else if (str!=str1){

        this.$modal.msgError("两次输入的密码不一致");
      }

      else { listresetPwd(newPassword,a).then(response => {
        this.$modal.msgSuccess("重置密码成功,请重新登录");

        //若依项目部署重定向问题
        /*  location.href = '/zhxxzh/index';*/
        location.href = '/yhdemo';
      })
      }

    },

    //步骤条下一步的方法
    // next(username) {
    //   listMenu(username).then(response => {
    //     this.contentList = response.data;
    //   });
    //   if(this.user.username=="") {
    //
    //     this.$refs["contentList"].validate(valid => {
    //       this.$modal.msgError("用户不存在");
    //     });
    //
    //   }
    //   else {
    //     if (this.active++ > 3) this.active = 1
    //   }
    // },


    /** 提交按钮 */
    submitForm() {

      this.$refs["registerForm"].validate(valid => {
        if (valid){
/*          if( this.contentList.securityQuestionOne  = "我是傻逼"){
            this.contentList.securityQuestionOne = "1"
          }*/
          listquestion(this.contentList).then(response => {
            this.List1 = response.data ?? {};
            if (this.List1==1){
              if (this.active++ > 3)
                this.active = 1
            }
            else {
              console.log("密保问题进来了")
              this.$modal.msgError("密保错误");

            }
          });
        }
      });
    },



    // 步骤条上一步的方法
    pre() {
      if (this.active-- < 2)
        this.active = 1

    },
    handleLogin() {
      this.$refs.user.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store.dispatch("Login", this.user).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            if (this.captchaOnOff) {
              this.getCode();
            }
          });
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 38px;
}
</style>
